<template>
    <div class="edit-List">
        <div class="main-base-row-item-grid main-row-grid-3" v-if="mode === '0' || mode === '1'">
            <div class="main-text-tran-50">名称</div>
            <div class="main-text-tran-50">字段</div>
        </div>
        <div class="main-mas-button-ico" @click="addField" v-if="mode === '0'">
            <i class="el-icon-plus"></i>
        </div>
        <div v-if="!draggable">
            <div class="main-base-row-item-grid main-row-grid-3 m-b" v-for="(item, index) of field" :key="index">
                <div class="main-mas-input-simple main-mas-input-simple-input">
                    <div class="mas-basic-layout">
                        <input v-model="item.alias" class="mas-basis-input mas-basis-input2" />
                    </div>
                </div>
                <div class="main-mas-input-simple main-mas-input-simple-input">
                    <div class="mas-basic-layout">
                        <select v-model="selectValue[index]" @change="fieldChange()" class="main-mas-basis-select">
                            <option :value="index" v-for="(item, index) in headList" :key="index">{{ item }}</option>
                        </select>
                    </div>
                </div>
                <div class="main-mas-button-ico" @click="removeField(index)" v-if="mode === '0' && field.length > 2">
                    <i class="el-icon-minus"></i>
                </div>
            </div>
        </div>
        <div class="main-base-row-item-grid" v-if="draggable">
            <div class="main-text-tran-50">可拖拽</div>
        </div>
        <div v-if="draggable">
            <draggable :list="dragField" @update="updateDraggable">
                <transition-group>
                    <div class="main-base-row-item-grid main-row-grid-3 m-b" v-for="(item, index) of dragField" :key="index">
                        <div class="main-mas-input-simple main-mas-input-simple-input">
                            <div class="mas-basic-layout">
                                <input v-model="item.alias" @input="setFieldAlias(item.alias, index)" class="mas-basis-input mas-basis-input2" />
                            </div>
                        </div>
                        <div class="main-mas-input-simple main-mas-input-simple-input">
                            <div class="mas-basic-layout">
                                <select v-model="selectValue[index]" @change="fieldChange()" class="main-mas-basis-select">
                                    <option :value="index" v-for="(item, index) in headList" :key="index">{{ item }}</option>
                                </select>
                            </div>
                        </div>
                        <div class="main-mas-button-ico" @click="removeField(index)" v-if="mode === '0' && dragField.length > 2">
                            <i class="el-icon-minus"></i>
                        </div>
                    </div>
                </transition-group>
            </draggable>
        </div>
    </div>
</template>

<script>
import draggable from 'vuedraggable';
import util from '@/js/util/util.js';
export default {
    name: 'EditTableList',
    props: {
        headList: {
            default: () => [],
            type: Array
        },
        mode: {
            default: '0',
            type: String
        },
        field: {
            required: true,
            default: () => [],
            type: Array
        },
        draggable: {
            default: false,
            type: Boolean
        }
    },
    components: {
        draggable
    },
    data() {
        return {
            selectValue: [],
            dragField: []
        };
    },
    watch: {
        field: {
            handler() {
                this.dragField = util.clone(this.field);
            },
            deep: true
        }
    },
    created() {
        if (this.draggable) {
            this.dragField = util.clone(this.field);
        }
        if (this.field && this.field.length) {
            for (let index = 0; index < this.field.length; index++) {
                let element = this.field[index].index;
                let len = this.headList.length;
                let i = element < len ? element : index;
                this.selectValue.push(index < this.headList.length ? i : this.headList.length - 1);
            }
        }
    },
    methods: {
        addField() {
            this.field.splice(this.field.length, 0, {
                alias: '',
                index: this.field.length
            });
        },
        removeField(index) {
            this.field.splice(index, 1);
            for (let index = 0; index < this.field.length; index++) {
                let element = this.field[index];
                element.index = index;
            }
        },
        fieldChange() {
            for (let index = 0; index < this.field.length; index++) {
                let element = this.field[index];
                element.index = this.selectValue[index];
            }
        },
        updateDraggable(event) {
            let from = event.oldIndex;
            let to = event.newIndex;
            if (from >= 0 && from < this.field.length && to >= 0 && to < this.field.length && from != to) {
                let element = this.field[from];
                this.field.splice(from, 1);
                this.field.splice(to, 0, element);
            }
            for (let index = 0; index < this.field.length; index++) {
                let element = this.field[index];
                this.selectValue[index] = element.index;
            }
        },
        setFieldAlias(alias, index) {
            this.field[index].alias = alias;
        }
    }
};
</script>

<style lang="scss" scoped>
.edit-List {
    display: grid;
    grid-template-rows: auto;
    grid-row-gap: 6px;
    width: 100%;
    position: relative;
    overflow: auto;
    padding-left: 20px;
    .icon-domains {
        cursor: pointer;
        font-size: 20px;
    }
    .single-head {
        color: #ffffff99;
        cursor: move;
        line-height: 32px;
    }
    .m-b {
        margin-bottom: 6px;
    }
}
</style>